<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>上传图片</title>
<link href="<%=path %>/plugins/uploadify/css/uploadify.css" type="text/css" rel="stylesheet" />
<style>

   .picdiv{
      height:500px;
      width: 100%;
      border: solid 1px;
	  border-collapse: collapse;
	  border-color: gainsboro;
	  margin-top:30px;
	  overflow-y: auto;
	  position:relative;
   }
   .picbtn{
      height: 30px; line-height: 30px; width: 120px;margin-top:5px;
   }
   .divfooter{
		position: absolute;
		height: 20px;
		bottom: 20px;
		right: 2px;
   }
   .mybtn{
        color: #444;
		background: #fff;
		background-repeat: repeat-x;
		border: 1px solid #bbb;
		background-repeat: repeat-x;
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#eeeeee,GradientType=0);
		-moz-border-radius: 5px 5px 5px 5px;
		-webkit-border-radius: 5px 5px 5px 5px;
		border-radius: 5px 5px 5px 5px;
		width: 107px;
		height: 32px;
   }
   .mybtn:hover{
		background:   #e2e2e2;
		cursor:pointer;
   }
   .star{
		display: inline-block;
		margin: 0 2px;
		background: url(../../style/images/star.png) no-repeat;
		width: 13px;
		height: 13px;
		cursor:pointer;
   }
   .starempty{
		display: inline-block;
		margin: 0 2px;
		background: url(../../style/images/star_empty.png) no-repeat;
		width: 13px;
		height: 13px;
		cursor:pointer;
   }
   .picinfo{
      width:160px;height:140px;text-align:center;float:left;
      margin-bottom: 40px;
   }
   .xalt{
    position: absolute;
	width: 32px;
	height: 32px;
	top: -105px;
	right: 1px;
	cursor: pointer;
	background: url(../../style/images/x_alt.png) no-repeat;
	display:none;
   }
   .picindex{
     position: absolute;
	 width: 148px;
	 height: 32px;
	 bottom: -3px;
	 left: -3px;
	 display:none;
   }
</style>
</head>

<body style="background-image: linear-gradient(rgb(255, 255, 255) 0px, rgb(238, 238, 238) 100%);">
<div style="width:80%;">
     <!-- 机经图片 -->
     <div id="file_upload_1" class="picdiv" >
	       <div>
	           <div id="file_upload_1-button" class="uploadify-button picbtn" filefield="jjpic" btext="轮播图">
				  <span class="uploadify-button-text"></span>
				</div>
	       </div>
	       <form   method="post" enctype="multipart/form-data">
	           <input type="hidden" name="type" value="jjpic" />
			   <div style="width:100%;" id="jjpic_infodiv">
			      <!-- 图片信息 -->
				</div> 
		   </form>
		   <div class="divfooter" >
		     <button class="mybtn" onclick="submit(this,1);">保存</button> 
		   </div>
	 </div>
	 <!-- 真题速递图片 -->
     <div id="file_upload_2" class="picdiv" >
	       <div>
	           <div id="file_upload_2-button" class="uploadify-button picbtn" filefield="ztsdpic" btext="选择真题速递图片(6)">
				  <span class="uploadify-button-text"></span>
				</div>
	       </div>
	       <form   method="post" enctype="multipart/form-data">
	           <input type="hidden" name="type" value="ztsdpic" />
			   <div style="width:100%;" id="ztsdpic_infodiv">
			      <!-- 图片信息 -->
				</div> 
		   </form>
		   <div class="divfooter" >
		     <button class="mybtn" onclick="submit(this,0);">保存</button> 
		   </div>
	 </div>
	 <!-- 风向标图片 -->
     <div id="file_upload_3" class="picdiv" >
	       <div>
	           <div id="file_upload_3-button" class="uploadify-button picbtn" filefield="fxbpic" btext="选择风向标图片(3)">
				  <span class="uploadify-button-text"></span>
				</div>
	       </div>
	       <form   method="post" enctype="multipart/form-data">
	           <input type="hidden" name="type" value="fxbpic" />
			   <div style="width:100%;" id="fxbpic_infodiv">
			      <!-- 图片信息 -->        
			   </div> 
		   </form>
		   <div class="divfooter" >
		     <button class="mybtn" onclick="submit(this,0);">保存</button> 
		   </div>
	 </div>
	 <!-- 小马带你练图片 -->
     <div id="file_upload_4" class="picdiv" >
	       <div>
	           <div id="file_upload_4-button" class="uploadify-button picbtn" filefield="xmdnlpic" btext="小马带你练图片(8)">
				  <span class="uploadify-button-text"></span>
				</div>
	       </div>
	       <form   method="post" enctype="multipart/form-data">
	           <input type="hidden" name="type" value="xmdnlpic" />
			   <div style="width:100%;" id="xmdnlpic_infodiv">
			      <!-- 图片信息 -->        
			   </div> 
		   </form>
		   <div class="divfooter" >
		     <button class="mybtn" onclick="submit(this,0);">保存</button> 
		   </div>
	 </div>
	 
</div>
 
</body>


<script type="text/javascript" src="<%=path %>/script/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="<%=path %>/plugins/uploadify/js/jquery.uploadify.min.js"></script>
<script type="text/javascript" src="<%=path %>/script/jquery.easyui.min.js"></script>
<script type="text/javascript" src="<%=path %>/script/easyui-lang-zh_CN.js"></script>
<script type="text/javascript">
      
	   $(function() {
		   
		   //加载图片
		   $.ajax({
			   type: 'get' ,
			   url : '<%=path%>/home/pics' ,
			   success:function(pics){
				   var json = eval(pics) ;
				   var linkAddr = '',questionNum='' ,isJjPic=1,star=0;
				   for(var i=0 ;i<json.items.length ;i++){
					   var pic = json.items[i] ;
					   var field = getFieldByType(pic.type) ;
					   var picurl = pic.picUrl ;
					   if("jjpic"==field){
						   isJjPic = 1 ;
						   linkAddr = pic.linkAddr ;
					   }else{
						   isJjPic = 0 ;
						   questionNum = pic.questionNum ;
						   star = pic.star ;
					   }
					   
					   addInfoElement(field ,pic.picIndex,picurl,linkAddr,questionNum,star,isJjPic) ;
				   }
			   }
		   });
		   
		   
		   
		   //上传配置
		   $(".uploadify-button").each(function(){
			   var field = $(this).attr('filefield') ;
			   var buttonText = $(this).attr('btext') ;
			   var isJjPic = 1; 
			   $(this).uploadify({
			        height        : 30,
			        swf           : '<%=path %>/plugins/uploadify/swf/uploadify.swf',
			        uploader      : '<%=path %>/home/upload?type='+field,
			        width         : 120,
			        buttonText    : buttonText,
			        fileTypeExts  : '*.gif; *.jpg; *.png;*.bmp;',
		            fileObjName   :   field,
		            onUploadSuccess : function(file, data, response) {
		            	var picurl = data ;
		            	if(field!='jjpic'){
		            		isJjPic = 0 ;
		            	}
		            
		            	addInfoElement(field ,0,picurl,'','',5,isJjPic) ;
		            }
			    });
		   });
		   
		   //星级选择
		   $(".starspan i").live('click',function(){
			   var index = $(this).index() ;
			   var starnum = index ;
			   if($(this).hasClass('star')){
				   for(var i=index ;i<5 ;i++){
					   $(this).parent().children().eq(i).removeClass('star') ;
					   $(this).parent().children().eq(i).addClass('starempty') ;
				   }
			   }else{
				   for(var i=0 ;i<=index ;i++){
					   $(this).parent().children().eq(i).addClass('star') ;
					   $(this).parent().children().eq(i).removeClass('starempty') ;
				   }
				   starnum = starnum+1;
			   }
			   $(this).parent().parent().find("input[name='star']").val(starnum) ;
		   });
		    
		   //鼠标放在图片上显示删除按钮和序号
		   $(".picspan").live('mouseover',function(){
			   $(this).find('i').css('display','block') ;
			   $(this).find("span.picindex").css('display','block');
		   });
		   $(".picspan").live('mouseout',function(){
			   $(this).find('i').css('display','none') ;
			   $(this).find("span.picindex").css('display','none');
		   });
		   
		  
		});
	   //删除图片信息框
	   function delpicinfo(obj){
		   $(obj).parent().parent().remove();
	   }
	   var indexflag = true ,questionFlag = true;
	   //图片索引
       var jjpic_index = 0 ,ztsdpic_index = 0,fxbpic_index=0 ,xmdnlpic_index=0 ;
	   //添加图片信息框
	   function addInfoElement(field ,pindex,picurl,linkAddr,questionNum,star,isJjPic){
		    
		   var parent = $("#"+field+"_infodiv") ;
		   var pic_index = dealIndex(field,pindex) ;
		   var _div = $('<div class="picinfo">') ;
		   var _span = $('<span style="position:relative;" class="picspan">') ;
		   
		   var _img = '<img src="'+picurl+'" width="150" height="120"  />' ;
		   var _i = '<i class="xalt" onclick="delpicinfo(this);"></i>' ;
		   var _picindex = '<span class="picindex"><input type="text" placeholder="图片索引" name="picindex" value="'+pic_index+'" onblur="checkIndex(this.value);" /></span>';
		   var _picurl = '<input type="hidden" name="picurl" value="'+picurl+'" />';
		   var _startext = '<input type="hidden" name="star" value="'+star+'" />';
		   var _linkAddr = '<input type="text" name="linkAddr" value="'+linkAddr+'" placeholder="链接地址" />' ;
		   var _questionNum = '<input type="text" name="questionNum" value="'+questionNum+'"  placeholder="题号" onblur="checkQnumIsExist(this.value);" /><br/>' ;
		   
		   var _starspan = $('<span class="starspan">') ;
		   
		   for(var i=0 ;i<5 ;i++){
			   var _stari = '<i class="star"></i>' ;
			   var _starnoi = '<i class="starempty"></i>' ;
			   if(i<star){
				   _starspan.append(_stari) ;
			   }else{
				   _starspan.append(_starnoi) ;
			   }
		   }
		   
		   _span.append(_img).append(_i).append(_picindex) ;
		   _div.append(_span).append("<br/>").append(_picurl);
		   if(isJjPic==1){
			   _div.append(_linkAddr);
		   }else{
			   _div.append(_startext).append(_questionNum).append(_starspan) ;
		   }
		   parent.append(_div) ;
	   }
	   
	   //提交图片信息
	   function submit(obj,isJjPic){
		   var f = true ,hasEmpty = true ,temp = true;
		   
		   var root = $(obj).parent().parent();
		   
		   if(isJjPic==1){
			   root.find("input[name='linkAddr']").each(function(i){
				   if($(this).val().length==0){
					   alert('链接地址不能为空') ;
					   hasEmpty = true;
					   return false;
				   }
				   if(i== root.find("input[name='linkAddr']").length-1){
					   hasEmpty = false;
				   }
			   });
			   
		   }else{
			   root.find("input[name='questionNum']").each(function(i){
				   if($(this).val().length==0){
					   alert('题号不能为空') ;
					   hasEmpty = true;
					   return false;
				   }
				   if(i== root.find("input[name='questionNum']").length-1){
					   hasEmpty = false;
				   }
			   });
			   temp = temp && questionFlag ;
		   }
		 
		   if(!hasEmpty){
			   f = true;
		   }
		   if(f && indexflag &&temp){
			   root.find("form").form('submit', {
					url: '<%=path%>/home/editpic',
					success: function(result){
					   if(result==1){
						   alert('操作成功');
					   }else{
						   alert('操作失败，请稍后重新') ;
					   }
					}
				});
		   }
	   }
	   
	   //检查图片索引号
	   function checkIndex(index){
		   if(!(/^\d+$/.test(index))){
			   indexflag = false ;
			   alert('索引只能是数字') ;
		   }else{
			   indexflag = true;
		   }
	   }
       //检查题号是否存在
	   function checkQnumIsExist(qnum){
			 
			if(qnum.length>0){
				$.ajax({
					type: 'get'  ,
					url : '<%=path%>/question/checkQnumIsExist' ,
					data: 'qnum='+qnum ,
					success:function(rs){
						if(rs==1){
							questionFlag = true;
						}else{
							alert('题号不存在');
							questionFlag = false ;
						}
					}
				});
			}else{
				alert('题号不能为空');
				questionFlag = false ;
			}
		}
       
       //处理索引
	   function dealIndex(field ,pindex){
		   var index = 0;
		   if("jjpic" == field){
			   jjpic_index = pindex==0?++jjpic_index:pindex ;
			   index = jjpic_index;
		   }else if("ztsdpic" == field){
			   ztsdpic_index = pindex==0?++ztsdpic_index:pindex ;
			   index = ztsdpic_index ;
		   }else if("fxbpic" == field){
			   fxbpic_index = pindex==0?++fxbpic_index:pindex ;
			   index =  fxbpic_index ;
		   }else if("xmdnlpic" == field){
			   xmdnlpic_index = pindex==0?++xmdnlpic_index:pindex ;
			   index =  xmdnlpic_index ;
		   }
		   return index;
	   }
       //通过类型获取图片字段
       function getFieldByType(type){
    	   var field = "jjpic" ;
    	   if(type == 1){
    		   field = "jjpic" ;
    	   }else if(type==2){
    		   field = "ztsdpic" ;
    	   }else if(type==3){
    		   field = "fxbpic" ;
    	   }else if(type==4){
    		   field = "xmdnlpic" ;
    	   }
    	   return field ;
       }
</script>
 
</html>
